<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Chord Diagram</title>

    <script type="text/javascript" src="../../deps/compatible.js"> </script>
    <script type="text/javascript" src="../../deps/d3.js"></script>
    <script type="text/javascript" src="../../deps/d3.csv.js"></script>
    <script type="text/javascript" src="../../deps/d3.layout.js"></script>
    <script type="text/javascript" src="../../deps/raphael.js"></script>
	<script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
    <!-- chord -->
    <script type="text/javascript" src="../../deps/seajs/sea.js"></script>
    <script type="text/javascript">
    seajs.config({
        alias: {
            'datav': '/DataVisual/resources/datavjs/datav.js',
            'chord': '/DataVisual/resources/datavjs/libs/chord.js'
        }
    });
    </script>

  <STYLE type="text/css">
#chart {
    border-top: 1px dashed #F00;
    border-bottom: 1px dashed #F00;
    padding-left: 20px;
}
.textArea {
    border: 2px solid black;
    color: black;
    font-family: monospace;
    height: 3in;
    overflow: auto;
    padding: 0.5em;
    width: 750px;
}
</STYLE>
  </head>
  <body>

    <div id="chart"></div>

        <script type="text/javascript">

    seajs.use(["chord", "datav"], function (Chord, DataV) {
        // DataV.changeTheme("datav");
        var chord = new Chord("chart",{
                width: 800
            });
        DataV.csv("chord.csv", function (source) {
            chord.setSource(source);
            chord.render();
        });
    });
        </script>
    </script>
  </body>
</html>
